<template>
	<view>       <!-- backState="1000" -->
		<nav-bar home :bgColor="['#CCCCCC','#CCCCCC']"  fontColor="#333333" title="羊舍"></nav-bar>
		<view class="banner">
			
			<!-- <swiper class="bannerContent" autoplay="true" indicator-dots='true' indicator-color='rgba(1,1,1,0.01)'
				indicator-active-color="#ffab09">
				<swiper-item class="swiper-item">
					<image src="../../static/img/lb2.png" class="swiper-img"></image>
				</swiper-item>
				<swiper-item class="swiper-item">
					<image src="../../static/img/lb1.png" class="swiper-img"></image>
				</swiper-item>
			</swiper> -->
		</view>
		<view class="content">
			<qiun-title-bar title="羊舍列表" />
			
			<view class="productList" v-for="item in dataList"  @click="jiuxindai(item)">
				<!-- <view style="width: 100%;height: 120rpx;"> -->
				<!-- 	<view style="display: flex;width: 95%;margin: 0 auto;height: 50rpx;">
						<view style="color: gray;width: 95%;margin: 0 auto;">{{item.warehouserName}} ：总数量{{item.sheepQtyLeft}} 羊舍面积：{{item.sqmt}} </view>
				 -->		<!-- <view class="tag">{{item.productType}}</view> -->
					<!-- </view> -->
					<view style="color: gray;width: 95%;margin: 0 auto;">{{item.warehouserName}} ：总数量{{item.sheepQtyLeft}} 羊舍面积：{{item.sqmt}} </view>
					
					<view style="color: gray;width: 95%;margin: 0 auto;">种公羊数量：{{item.maleSheepQty}} 种母羊数量：{{item.femaleSheepQty}} </view>
							
					<view style="color: gray;width: 95%;margin: 0 auto;">羊羔数量：{{item.babySheepQty}} 商品羊数量：{{item.sheepForSaleQty}}</view>
					<view style="color: gray;width: 95%;margin: 0 auto;">养殖方式：{{item.farmType}} 当日饲料：{{item.todayFeed}}公斤</view>
					<!-- <view style="display: flex;border-bottom: 1px solid #e3e3e3;">
						<view class="tag2">羊舍详情</view>
					
						
					</view>
					 -->
				</view>
				<!-- <view style="display: flex;justify-content: space-around;"> -->
					<!-- <view class="numberBox">
						<view style="margin-top: 40rpx;text-align: center;">
							<span style="color: #f62105;font-size: 50rpx;font-weight: bold;">{{item.creditLineUpto}}</span>
							<span style="color: #f62105;font-size: 25rpx;margin-top: 18rpx;">万</span>
						</view>
						<view style="font-size: 28rpx;color: #b7b7b7;">最高可借</view>
					</view> -->
				<!-- 	<view class="colorBar"></view> -->
					<!-- <view class="numberBox">
						<view style="margin-top: 40rpx;text-align: center;">
							<span style="color: #f62105;font-size: 50rpx;font-weight: bold;">{{item.montlyRate}}</span>
							<span style="color: #f62105;font-size: 25rpx;margin-top: 18rpx;">%</span>
						</view>
						<view style="font-size: 28rpx;color: #b7b7b7;">月利率低至</view>
					</view> -->
					<!-- <view class="colorBar"></view> -->
				<!-- 	<view class="numberBox">
						<view style="margin-top: 40rpx;text-align: center;">
							<span style="color: #f62105;font-size: 50rpx;font-weight: bold;">{{item.paybackNumbers}}</span>
							<span style="color: #f62105;font-size: 25rpx;margin-top: 18rpx;">个月</span>
						</view>
						<view style="font-size: 28rpx;color: #b7b7b7;">期限最长</view>
					</view> -->
					
				<!-- </view> -->
			</view>
			<view style="height: 60rpx;">
				<view class="bottomBox">
					<view class="buttonBox">
						
					<button type="primary" class="add-btn-2" @click="handleAdd">新增</button>
					
					</view>
				</view>
			</view>
			
	 		
	     
			
			<!-- <qiun-title-bar title="产品种类占比" />
			<view class="charts-box">
				<qiun-data-charts type="rose" :opts="{legend:{position: 'bottom'}}" :chartData="chartsDataRose1" />
			</view>
			<qiun-title-bar title="应收" />
			<view class="charts-box">
				<qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}"
					:eopts="{seriesTemplate:{smooth:true}}" :chartData="chartsDataLine1" :echartsApp="true" />
			</view>
			<qiun-title-bar title="应付" />
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="chartsDataLine2" :echartsApp="true" />
			</view>
			<qiun-title-bar title="利润" />
			<view class="charts-box">
				<qiun-data-charts type="area"
					:opts="{yAxis:{data:[{min:0}]},extra:{area:{type:'curve',addLine:true,gradient:true}}}"
					:chartData="chartsDataLine3" :echartsApp="true" />
		
			</view> -->
			<!-- <qiun-title-bar title="笔数情况走势图" />
			<view class="charts-box">
				<qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}"
					:eopts="{seriesTemplate:{smooth:true}}" :chartData="chartsDataColumn1" :echartsApp="true" />
			</view>
			<qiun-title-bar title="金额情况走势图" />
			<view class="charts-box">
				<qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}"
					:eopts="{seriesTemplate:{smooth:true}}" :chartData="chartsDataColumn2" :echartsApp="true" />
			</view> -->
			<!-- <uni-card :isShadow="true" title="待办任务(133)" mode="basic" @click="mdclick" extra="更多任务>">
				<view v-for="(item,index) in dataList">
					<uni-list>
						<view style="padding: 20rpx;">
							<uni-list-item :index="index+1"
								:title="item.customerName + item.type"
								:note="item.date" link="reLaunch" clickable>
							</uni-list-item>
						</view>
					</uni-list>
				</view>
			</uni-card> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList1:[
					{
						customerName:'济南市天桥区鲁康名饮百货超市 ',
						type:' 自动放款融资申请',
						date:'2023-06-27 10:33:40'
					},
					{
						customerName:'济南市天桥区鲁康名饮百货超市',
						type:' 自动放款融资申请',
						date:'2023-06-27 10:23:50'
					},
					{
						customerName:'郑州航空港区财富汇烟酒店',
						type:' 自动放款融资申请',
						date:'2023-06-26 11:27:30'
					},
					{
						customerName:'郑州航空港区财富汇烟酒店',
						type:' 自动放款融资申请',
						date:'2023-06-27 10:33:40'
					},
					{
						customerName:'admin',
						type:' 核心企业额度申请',
						date:'2023-06-19 17:52:43'
					}
				],
				chartsDataColumn1: {
					"categories": ["2019", "2020", "2021", "2022", "2023"],
					"series": [{
							"name": "新增客户",
							"data": [35, 8, 25, 37, 4]
						}, {
							"name": "新增放款笔数",
							"data": [70, 40, 65, 100, 44]
						},
						{
							"name": "待还款笔数",
							"data": [100, 80, 95, 150, 112]
						}, {
							"name": "已还完笔数",
							"data": [18, 27, 21, 24, 6]
						}
					]
				},
				chartsDataColumn2: {
					"categories": ["2019", "2020", "2021", "2022", "2023"],
					"series": [{
							"name": "放款金额（元）",
							"data": [70, 40, 65, 100, 44]
						}, {
							"name": "实还金额（元）",
							"data": [35, 8, 25, 37, 4]
						},
						{
							"name": "已付利息（元）",
							"data": [18, 27, 21, 24, 6]
						}
					]
				},
				chartsDataRose1: {
					"series": [{
						"data": [{
							"name": "酒采贷",
							"value": 50
						}, {
							"name": "酒新贷",
							"value": 30
						}, {
							"name": "酒微贷",
							"value": 20
						}]
					}]
				},
				chartsDataLine1: {
					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
					"series": [{
						"name": "应收",
						"data": [35, 32, 25, 36, 43, 45],
						"color": "#3B5DE0"
					}]
				},
				chartsDataLine2: {
					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
					"series": [{
						"name": "应付",
						"data": [35, 22, 25, 37, 48, 46],
						"color": "#facc14"
					}]
				},
				chartsDataLine3: {
					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
					"series": [{
						"name": "利润",
						"data": [35, 38, 25, 37, 45, 50],
						"color": "#f04864"
					}]
				},
				dataList: []
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			switchTab(){
				uni.switchTab({
					url:'/pages/apply-limit/apply-limit'
				})
			},
			handleAdd() {
			  uni.navigateTo({
			    url: `/pages/resource/addWarehouse`
			  });
			},
			loadData(){
				let opt = {
					url:'basic/warehouse/search/1/5',
					method:'POST'
				};
				this.$http.httpTokenRequest(opt,{}).then(res =>{
					this.dataList = res.data.data.records
					for(let i in this.dataList){
					/* 	if(this.dataList[i].creditLineUpto.toString().length > 7){
							this.dataList[i].creditLineUpto = this.dataList[i].creditLineUpto.toString().slice(0,4)
						}
						else{
							this.dataList[i].creditLineUpto = this.dataList[i].creditLineUpto.toString().slice(0,3)
						} */
					}
					})
			},
			mdclick(){
				uni.navigateTo({
					url:'/pages/business-hall/business-hall'
				})
			},
			jiuxindai(e){
				let limitData = JSON.stringify(e)
				//alert(limitData);
				uni.navigateTo({
					url:'/pages/resource/warehouseView?id=' +limitData
				})
			},
			complete(e) {
				console.log('执行完后+', e)
			},
		}
	}
</script>

<style>
	page {
		background: #f9f9f9;
	}

	.content {
		width: 95%;
		margin: 0 auto;
	}
	.bannerContent {
		width: 100%;
		height: 350rpx;
	}
	
	.swiper-img {
		width: 100%;
		height: 350rpx;
	}
	
	.contentBox {
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;
	}
	.productList {
		height: 200rpx;
		width: 100%;
		background-image: linear-gradient(#ffffff, #f9ffff, #f7ffff);
		border-radius: 15rpx;
		margin-top: 20rpx;
	}

	.tag {
		color: dodgerblue;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		border: 1px solid #efefef;
		border-radius: 25px;
		font-size: 25rpx;
		line-height: 50rpx;
		background: #b5e3ff;
		position: absolute;
		right: 5%;
		margin-top: 30rpx;

	}

	.tag1 {
		color: #39ed02;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		border: 1px solid #39ed02;
		border-radius: 25px;
		font-size: 25rpx;
		line-height: 50rpx;
		margin: 20rpx 10rpx;
	}

	.tag2 {
		color: #f4e10b;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		border: 1px solid #f4e10b;
		border-radius: 25px;
		font-size: 25rpx;
		line-height: 50rpx;
		margin: 20rpx 10rpx;
	}

	.numberBox {
		height: 170rpx;
		width: 220rpx;
		text-align: center;
	}

	.colorBar {
		height: 50rpx;
		width: 3rpx;
		background: #9d9d9d;
		margin-top: 60rpx;
	}
</style>